<template>
	<view class="my-content">
		<view class="car-item" v-for="item in carList" @click="toAddCar(item)">
			<text>{{ item.car_number }}</text>
			<image src="../../static/my/img2.png" mode="widthFix"></image>
			<div class="delete-btn" @click.stop="deleteCar(item)">删除</div>
		</view>
		<Nomore v-if="carList.length == 0"></Nomore>
	</view>
</template>

<script>
export default {
	data() {
		return {
			carList: []
		}
	},
	onShow() {
		this.getCarList();
	},
	methods: {
		toAddCar(item) {
			uni.navigateTo({
				url: `/pages/my/addCar?item=${JSON.stringify(item)}`
			});
		},
		async deleteCar(item) {
			uni.showModal({
				title: '提示',
				content: '确定要删除吗？',
				success: async (res) => {
					if (res.confirm) {
						const res = await this.http("post", "/api/car/del", {
							id: item.id
						});
						this.toast(res.message)
						this.getCarList();
					}
				}
			});
		},
		async getCarList() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const res = await this.http("post", "/api/car/index");
			this.carList = res.data;
			uni.hideLoading();
		}
	}
}
</script>

<style lang="less" scoped>
.delete-btn {
	position: absolute;
	right: 0;
	top: 0;
	background: red;
	color: #fff;
	padding: 10upx 20upx;
	border-radius: 10upx;
}

.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.car-item {
		width: 100%;
		background: #FFFBDB;
		display: flex;
		border-radius: 16upx;
		align-items: center;
		padding: 36upx 40upx;
		position: relative;
		margin-bottom: 20upx;
		border: 2px solid #3662EC;
		box-sizing: border-box;

		text {
			font-size: 44upx;
			color: #FF8F1F;
			font-weight: 500;
			display: block;
			width: 50%;
			text-align: center;
		}

		image {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 310upx;
			height: auto;
		}
	}
}
</style>